<!DOCTYPE html>
<html>
<head>
    <title>maptalks.GridLayer demo</title>
    <script src="https://cdn.jsdelivr.net/npm/maptalks@>=0.35.1/dist/maptalks.min.js"></script>
    <script src="../dist/maptalks.gridlayer.js"></script>
    <script src="metrics.js"></script>
    <script src="colors.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks@>=0.35.1/dist/maptalks.css">
    <style>
        #map { width: 960px; height: 600px; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    var map = new maptalks.Map("map",{
        center:      [175.46873, -37.90258],
        zoom:  16,
        hitDetect : false,
        attributionControl : {
            'content' : '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        },
        baseLayer : new maptalks.TileLayer("tile",{
            urlTemplate: 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
            subdomains  : ['a','b','c','d']
        })
    });
    var data = [];
    for (var i = -150; i < 150; i++ ){
        for (var ii = -150; ii < 150; ii++) {
            data.push([i, ii, { symbol: getSymbol(i, ii)}]);
        }
    }

    var grid = new maptalks.GridLayer('grid',{
        projection : true,
        center : map.getCenter(),
        width : 100,
        height : 100,
        data : data
    })
    .addTo(map);

    var r = new maptalks.VectorLayer('r').addTo(map);
    map.on('click', function(e) {
        r.clear().addGeometry(grid.identify(e.coordinate).geometry);
    })

    function getSymbol(col, row) {
        var len = colors.length;
        var color = colors[Math.round(Math.random() * (len - 1))];
        return symbol = {
            lineColor : '#000',
            lineOpacity : 1,
            polygonFill : 'rgb(' + color.join() + ')',
            polygonOpacity : 0.4
        };
    }


</script>
</body>
</html>
